<template>
<div>
  <a-modal v-model:visible="_d.visible"
    width="800px"
    :footer="null">
    <div class="text-box">
      <div>支持的文件格式: mp3,wav,mp4,mpeg,mpga,m4a,webm</div>
      <div>最大文件大小: 20MB(如果文件过大，请先将文件分片后，逐个上传分析)</div>
      <div>音频分析相较于文字生成，更消耗算力资源，请耐心等待</div>
    </div>
    <div class="btn-box">
      <a-upload
        v-model:file-list="_d.fileList"
        name="AudioFile"
        :show-upload-list="false"
        :action="_d.action"
        :headers="_d.headers"
        :before-upload="beforeUpload"
        @change="uploadChange">
        <a-button type="primary">上传文件</a-button>
      </a-upload>
    </div>
  </a-modal>

  <a-modal class="percent-modal" v-model:visible="_d2.visible" :footer="null" :closable="false" :maskClosable="false">
    <a-progress type="circle" :percent="_d2.percent" />
  </a-modal>
</div>
  
</template>

<script setup>
  import { reactive, ref, onMounted } from 'vue'
  import { notification, message} from "ant-design-vue";
  import {useUserStore} from '@/store/userStore'

  const emit = defineEmits(['success']);

  const _d = reactive({
    visible: false,
    action: '',

    fileType: ['mp3','wav','mp4','mpeg','mpga','m4a','webm'],
    fileList: [],
    headers: {
      token: useUserStore().token
    }
  })

  const _d2 = reactive({
    visible: false,
    percent: 0
  })

  function open(id) {
    _d.action = '/api/Chat/Startaudio?SessionId='+id;
    _d.visible = true;
  }

  function beforeUpload(file) {
    let arr = file.name.split('.');
    let type = arr[arr.length - 1];
    if (_d.fileType.indexOf(type) == -1) {
      message.error("请上传"+_d.fileType.join(',')+'格式');
      return false;
    }
    _d.visible = false;
    _d2.percent = 0;
    _d2.visible = true;
    return true;
  }

  function uploadChange(info) {
    _d2.percent = info.file.percent;
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      _d2.visible = false;
      emit('success', info.file.name, info.file.response);
      message.success('上传音频文件成功');
    } else if (info.file.status === 'error') {
      _d2.visible = false;
      message.error('上传音频文件失败');
    }
  }


  defineExpose({
    open
  })

</script>
<style lang="less" scoped>
.text-box {
  font-size: 16px;
  line-height: 30px;
}
.btn-box {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
<style>
.percent-modal {
  position: fixed;
  top: 40% !important;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 200px !important;
  height: 200px;
  .ant-modal-content {
    background: transparent;
    box-shadow: none;
    .ant-modal-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
